<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.11. Interactive elements</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="sec-forms.html#sec-forms"><span class="secno">4.10</span> <span class="content"><span>Forms</span></span></a> — <a href="index.html#contents">Table of contents</a> — <a href="semantics-scripting.html#semantics-scripting"><span class="secno">4.12</span> <span class="content">Scripting</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="interactive-elements.html#interactive-elements"><span class="secno">4.11</span> <span class="content">Interactive elements</span></a>
       <ol class="toc">
        <li><a href="interactive-elements.html#the-details-element"><span class="secno">4.11.1</span> <span class="content">The <span><code>details</code></span> element</span></a>
        </li><li><a href="interactive-elements.html#the-summary-element"><span class="secno">4.11.2</span> <span class="content">The <span><code>summary</code></span> element</span></a>
        </li><li><a href="interactive-elements.html#the-menu-element"><span class="secno">4.11.3</span> <span class="content">The <span><code>menu</code></span> element</span></a>
        </li><li><a href="interactive-elements.html#the-menuitem-element"><span class="secno">4.11.4</span> <span class="content">The <span><code>menuitem</code></span> element</span></a>
        </li><li>
         <a href="interactive-elements.html#context-menus"><span class="secno">4.11.5</span> <span class="content"><span>Context menus</span></span></a>
         <ol class="toc">
          <li><a href="interactive-elements.html#declaring-a-context-menu"><span class="secno">4.11.5.1</span> <span class="content">Declaring a context menu</span></a>
          </li><li><a href="interactive-elements.html#context-menu-processing-model"><span class="secno">4.11.5.2</span> <span class="content">Processing model</span></a>
          </li><li><a href="interactive-elements.html#the-relatedevent-interfaces"><span class="secno">4.11.5.3</span> <span class="content">The <code>RelatedEvent</code> interfaces</span></a>
         </li></ol>
        </li><li>
         <a href="interactive-elements.html#commands"><span class="secno">4.11.6</span> <span class="content">Commands</span></a>
         <ol class="toc">
          <li><a href="interactive-elements.html#facets"><span class="secno">4.11.6.1</span> <span class="content">Facets</span></a>
          </li><li><a href="interactive-elements.html#using-the-a-element-to-define-a-command"><span class="secno">4.11.6.2</span> <span class="content">Using the <code><span>a</span></code> element to define a command</span></a>
          </li><li><a href="interactive-elements.html#using-the-button-element-to-define-a-command"><span class="secno">4.11.6.3</span> <span class="content">Using the <code><span>button</span></code> element to define a command</span></a>
          </li><li><a href="interactive-elements.html#using-the-input-element-to-define-a-command"><span class="secno">4.11.6.4</span> <span class="content">Using the <code><span>input</span></code> element to define a command</span></a>
          </li><li><a href="interactive-elements.html#using-the-option-element-to-define-a-command"><span class="secno">4.11.6.5</span> <span class="content"><span>Using the <code><span>option</span></code> element to define a command</span></span></a>
          </li><li><a href="interactive-elements.html#using-the-menuitem-element-to-define-a-command"><span class="secno">4.11.6.6</span> <span class="content">Using the <code><span>menuitem</span></code> element to define a
  command</span></a>
          </li><li><a href="interactive-elements.html#using-the-accesskey-attribute-on-a-label-element-to-define-a-command"><span class="secno">4.11.6.7</span> <span class="content">Using the <code>accesskey</code> attribute
  on a <code><span>label</span></code> element to define a command</span></a>
          </li><li><a href="interactive-elements.html#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"><span class="secno">4.11.6.8</span> <span class="content">Using the <code>accesskey</code> attribute
  on a <code><span>legend</span></code> element to define a command</span></a>
          </li><li><a href="interactive-elements.html#using-the-accesskey-attribute-to-define-a-command-on-other-elements"><span class="secno">4.11.6.9</span> <span class="content">Using the <code>accesskey</code> attribute to define a command on other elements</span></a>
         </li></ol>
        </li><li>
         <a href="interactive-elements.html#the-dialog-element"><span class="secno">4.11.7</span> <span class="content">The <span><code>dialog</code></span> element</span></a>
         <ol class="toc">
          <li><a href="interactive-elements.html#anchor-points"><span class="secno">4.11.7.1</span> <span class="content">Anchor points</span></a>
         </li></ol>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.11" id="interactive-elements"><span class="secno">4.11. </span><span class="content">Interactive elements</span><a class="self-link" href="interactive-elements.html#interactive-elements"></a></h3>
     <h4 class="heading settled" data-level="4.11.1" id="the-details-element"><span class="secno">4.11.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-details"><code>details</code></dfn> element</span><a class="self-link" href="interactive-elements.html#the-details-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-102">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-128">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-23">Sectioning root</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#interactive-content" id="ref-for-interactive-content-21">Interactive content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-65">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-101">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-129">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-104">Content model</a>:
      </dt><dd>One <code><a data-link-type="element" href="interactive-elements.html#elementdef-summary" id="ref-for-elementdef-summary-2">summary</a></code> element followed by <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-130">flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-101">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-103">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-102">Global attributes</a>
      </dd><dd><code>open</code> - Whether the details are visible
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role</a> that supports <code>aria-expanded</code>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-124">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-101">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLDetailsElement" data-dfn-type="interface" data-export="" id="htmldetailselement-htmldetailselement">HTMLDetailsElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-102">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="interactive-elements.html#dom-htmldetailselement-open" id="ref-for-dom-htmldetailselement-open-1">open</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-7">details</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-162">represents</a> a disclosure widget from which the
  user can obtain additional information or controls.</p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-8">details</a></code> element is not appropriate for footnotes. Please see <a href="common-idioms-without-dedicated-elements.html#footnotes">§4.13.5 Footnotes</a> for details on how to mark up footnotes. </p>
     <p>The <span class="impl">first</span> <code><a data-link-type="element" href="interactive-elements.html#elementdef-summary" id="ref-for-elementdef-summary-3">summary</a></code> element child of the element, if any, <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-163">represents</a> the summary or legend of the details. <span class="impl">If there is no
  child <code><a data-link-type="element" href="interactive-elements.html#elementdef-summary" id="ref-for-elementdef-summary-4">summary</a></code> element, the user agent should provide its own legend (e.g.,
  "Details").</span></p>
     <p>The rest of the element’s contents <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-164">represents</a> the additional information or
  controls.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="details" data-dfn-type="element-attr" data-export="" id="element-attrdef-details-open"><code>open</code></dfn> content attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-27">boolean
  attribute</a>. If present, it indicates that both the summary and the additional information is
  to be shown to the user. If the attribute is absent, only the summary is to be shown.</p>
     <div class="impl">
      <p>When the element is created, if the attribute is absent, the additional information should be
  hidden; if the attribute is present, that information should be shown. Subsequently, if the
  attribute is removed, then the information should be hidden; if the attribute is added, the
  information should be shown.</p>
      <p>The user agent should allow the user to request that the additional information be shown or
  hidden. To honor a request for the details to be shown, the user agent must set the <code>open</code> attribute on the element to the value <code>open</code>. To honor a request for the information to be hidden, the user agent must
  remove the <code>open</code> attribute from the element.</p>
      <p>Whenever the <code>open</code> attribute is added to or removed from
  a <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-9">details</a></code> element, the user agent must <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-107">queue a task</a> that runs the
  following steps, which are known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="details-notification-task-steps">details notification task steps</dfn>, for this <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-10">details</a></code> element:</p>
      <ol>
       <li>
        <p>If another <a data-link-type="dfn" href="webappapis.html#tasks" id="ref-for-tasks-62">task</a> has been <a data-link-type="dfn" href="webappapis.html#queue-a-microtask" id="ref-for-queue-a-microtask-29">queued</a> to run the <a data-link-type="dfn" href="interactive-elements.html#details-notification-task-steps" id="ref-for-details-notification-task-steps-1">details notification task steps</a> for this <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-11">details</a></code> element, then abort these steps.</p>
        <p class="note" role="note"> When the <code>open</code> attribute is toggled
    several times in succession, these steps essentially get coalesced so that only one event is
    fired. </p>
       </li><li><a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-133">Fire a simple event</a> named <code>toggle</code> at the <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-12">details</a></code> element.
      </li></ol>
      <p>The <a data-link-type="dfn" href="webappapis.html#task-source" id="ref-for-task-source-14">task source</a> for this task must be the <a data-link-type="dfn" href="webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source-12">DOM manipulation task
  source</a>.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDetailsElement" data-dfn-type="attribute" data-export="" id="dom-htmldetailselement-open"><code>open</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-105">reflect</a> the <code>open</code> content attribute.</p>
     </div>
     <div class="example" id="example-97b2d495">
      <a class="self-link" href="interactive-elements.html#example-97b2d495"></a> The following example shows the <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-13">details</a></code> element being used to hide technical
    details in a progress report. 
<pre class="highlight"><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"progress window"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Copying "Really Achieving Your Childhood Dreams"<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;details&gt;</span>
  <span class="nt">&lt;summary&gt;</span>Copying... <span class="nt">&lt;progress</span> <span class="na">max=</span><span class="s">"375505392"</span> <span class="na">value=</span><span class="s">"97543282"</span><span class="nt">&gt;&lt;/progress&gt;</span> 25%<span class="nt">&lt;/summary&gt;</span>
  <span class="nt">&lt;dl&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Transfer rate:<span class="nt">&lt;/dt&gt;</span> <span class="nt">&lt;dd&gt;</span>452KB/s<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Local filename:<span class="nt">&lt;/dt&gt;</span> <span class="nt">&lt;dd&gt;</span>/home/rpausch/raycd.m4v<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Remote filename:<span class="nt">&lt;/dt&gt;</span> <span class="nt">&lt;dd&gt;</span>/var/www/lectures/raycd.m4v<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Duration:<span class="nt">&lt;/dt&gt;</span> <span class="nt">&lt;dd&gt;</span>01:16:27<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Color profile:<span class="nt">&lt;/dt&gt;</span> <span class="nt">&lt;dd&gt;</span>SD (6-1-6)<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Dimensions:<span class="nt">&lt;/dt&gt;</span> <span class="nt">&lt;dd&gt;</span>320×240<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/details&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
     </div>
     <div class="example" id="example-484f89c4">
      <a class="self-link" href="interactive-elements.html#example-484f89c4"></a> The following shows how a <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-14">details</a></code> element can be used to hide some controls by
    default: 
<pre class="highlight"><span class="nt">&lt;details&gt;</span>
  <span class="nt">&lt;summary&gt;&lt;label</span> <span class="na">for=</span><span class="s">fn</span><span class="nt">&gt;</span>Name <span class="err">&amp;</span> Extension:<span class="nt">&lt;/label&gt;&lt;/summary&gt;</span>
  <span class="nt">&lt;p&gt;&lt;input</span> <span class="na">type=</span><span class="s">text</span> <span class="na">id=</span><span class="s">fn</span> <span class="na">name=</span><span class="s">fn</span> <span class="na">value=</span><span class="s">"Pillar Magazine.pdf"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;&lt;label&gt;&lt;input</span> <span class="na">type=</span><span class="s">checkbox</span> <span class="na">name=</span><span class="s">ext</span> <span class="na">checked</span><span class="nt">&gt;</span> Hide extension<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/details&gt;</span>
</pre>
      <p>One could use this in conjunction with other <code>details</code> in a list to allow the user
    to collapse a set of fields down to a small set of headings, with the ability to open each
    one.</p>
      <p class="details-example"><img alt="" height="611" src="images/sample-details-1.png" width="345"><img alt="" height="666" src="images/sample-details-2.png" width="345"></p>
      <p>In these examples, the summary really just summarizes what the controls can change, and not
    the actual values, which is less than ideal.</p>
     </div>
     <div class="example" id="example-1a4b4c93">
      <a class="self-link" href="interactive-elements.html#example-1a4b4c93"></a> Because the <code>open</code> attribute is added and removed
    automatically as the user interacts with the control, it can be used in CSS to style the element
    differently based on its state. Here, a stylesheet is used to animate the color of the summary
    when the element is opened or closed: 
<pre class="highlight"><span class="nt">&lt;style&gt;</span>
  <span class="nt">details</span> <span class="o">&gt;</span> <span class="nt">summary</span> <span class="p">{</span> <span class="n">transition</span><span class="o">:</span> <span class="k">color</span> <span class="m">1s</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;</span> <span class="p">}</span>
  <span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="o">&gt;</span> <span class="nt">summary</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;details&gt;</span>
  <span class="nt">&lt;summary&gt;</span>Automated Status: Operational<span class="nt">&lt;/summary&gt;</span>
  <span class="nt">&lt;p&gt;</span>Velocity: 12m/s<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Direction: North<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/details&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.11.2" id="the-summary-element"><span class="secno">4.11.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-summary"><code>summary</code></dfn> element</span><a class="self-link" href="interactive-elements.html#the-summary-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-103">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-102">Contexts in which this element can be used</a>:
      </dt><dd>As the first child of a <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-15">details</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-105">Content model</a>:
      </dt><dd>Either: <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-151">phrasing content</a>.
      </dd><dd>Or: one element of <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-13">heading content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-102">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-104">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-103">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#button"><code>button</code></a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-125">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-102">DOM interface</a>:
      </dt><dd>Uses <code>HTMLElement</code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="interactive-elements.html#elementdef-summary" id="ref-for-elementdef-summary-5">summary</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-165">represents</a> a summary, caption, or legend for the
  rest of the contents of the <code><a data-link-type="element" href="interactive-elements.html#elementdef-summary" id="ref-for-elementdef-summary-6">summary</a></code> element’s parent <code>details</code> element<span class="impl">, if any</span>.</p>
     <h4 class="heading settled" data-level="4.11.3" id="the-menu-element"><span class="secno">4.11.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-menu"><code>menu</code></dfn> element</span><a class="self-link" href="interactive-elements.html#the-menu-element"></a></h4>
     <p class="warning"> The <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-10">menu</a></code> element, and each enumerated value of the <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-menu-type" id="ref-for-element-attrdef-menu-type-1">type</a></code> attribute are "at risk".
  If testing during the Candidate Recommendation phase does not identify at least two interoperable implementations
  in current shipping browsers of any value of the <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-menu-type" id="ref-for-element-attrdef-menu-type-2">type</a></code> attribute on the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-11">menu</a></code> element
  that value will be removed from the HTML 5.1 Specification. If there are no values left, the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-12">menu</a></code> element itself will be removed. </p>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-104">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-131">Flow content</a>.
      </dd><dd>If the element’s <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-toolbar" id="ref-for-statedef-menu-toolbar-3">toolbar</a> state: <a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-66">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-103">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-132">flow content</a> is expected.
      </dd><dd>If the element’s <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-3">popup menu</a> state: as the child of a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-13">menu</a></code> element whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-4">popup menu</a> state.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-106">Content model</a>:
      </dt><dd>If the element’s <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-toolbar" id="ref-for-statedef-menu-toolbar-4">toolbar</a> state: either zero or more <code>li</code> and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-15">script-supporting elements</a>, or, <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-133">flow content</a>.
      </dd><dd>If the element’s <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-5">popup menu</a> state: in any order, zero or more <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-4">menuitem</a></code> elements, zero or more <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-10">hr</a></code> elements, zero or more <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-14">menu</a></code> elements whose <code>type</code> attributes are in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-6">popup menu</a> state, and zero or more <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-16">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-103">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-105">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-104">Global attributes</a>
      </dd><dd><code>type</code> - Type of menu
      </dd><dd><code>label</code> - User-visible label
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menu"><code>menu</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-39"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#directory"><code>directory</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#list"><code>list</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#listbox"><code>listbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menubar"><code>menubar</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tablist"><code>tablist</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tabpanel"><code>tabpanel</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tree"><code>tree</code></a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-126">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-103">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLMenuElement" data-dfn-type="interface" data-export="" id="htmlmenuelement-htmlmenuelement">HTMLMenuElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-103">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmlmenuelement-type" id="ref-for-dom-htmlmenuelement-type-1">type</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmlmenuelement-label" id="ref-for-dom-htmlmenuelement-label-1">label</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-15">menu</a></code> element represents a group of commands.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menu" data-dfn-type="element-attr" data-export="" id="element-attrdef-menu-type"><code>type</code></dfn> attribute is an <a data-link-type="dfn" href="infrastructure.html#enumerated-attributes" id="ref-for-enumerated-attributes-19">enumerated
  attribute</a> indicating the kind of menu being declared. The attribute has two states. The
  "<dfn data-dfn-for="menu/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-menu-type-context"><code>context</code><a class="self-link" href="interactive-elements.html#attr-valuedef-menu-type-context"></a></dfn>" keyword maps to the <dfn class="dfn-paneled" data-dfn-for="menu" data-dfn-type="state" data-export="" id="statedef-menu-popup-menu">popup menu</dfn> state, in which the element is declaring a context menu
  or the menu for a <a data-link-type="element-state" href="sec-forms.html#element-statedef-button-type-menu" id="ref-for-element-statedef-button-type-menu-5">menu button</a>. The "<dfn data-dfn-for="menu/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-menu-type-toolbar"><code>toolbar</code><a class="self-link" href="interactive-elements.html#attr-valuedef-menu-type-toolbar"></a></dfn>" keyword maps to the <dfn class="dfn-paneled" data-dfn-for="menu" data-dfn-type="state" data-export="" id="statedef-menu-toolbar">toolbar</dfn> state, in which the element is declaring a toolbar. The attribute may also be
  omitted. The <i>missing value default</i> is the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-7">popup menu</a> state if the parent element is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-16">menu</a></code> element whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-8">popup
  menu</a> state; otherwise, it is the <a data-link-type="state" href="interactive-elements.html#statedef-menu-toolbar" id="ref-for-statedef-menu-toolbar-5">toolbar</a> state.</p>
     <p>If a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-17">menu</a></code> element’s <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-9">popup menu</a> state, then the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-166">represents</a> the commands of a popup menu, and the user can only examine and interact with the commands if that
  popup menu is activated through some other element, either via the <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-2">contextmenu</a></code> attribute or the <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-31">button</a></code> element’s <code>menu</code> attribute.</p>
     <p>If a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-18">menu</a></code> element’s <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-toolbar" id="ref-for-statedef-menu-toolbar-6">toolbar</a> state, then the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-167">represents</a> a
  toolbar consisting of its contents, in the form of either an unordered list of items (represented
  by <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-18">li</a></code> elements), each of which represents a command that the user can perform or
  activate, or, if the element has no <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-19">li</a></code> element children, <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-134">flow content</a> describing available commands.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menu" data-dfn-type="element-attr" data-export="" id="element-attrdef-menu-label"><code>label</code></dfn> attribute gives the label of the
  menu. It is used by user agents to display nested menus in the UI: a context menu containing
  another menu would use the nested menu’s <code>label</code> attribute for
  the submenu’s menu label. The <code>label</code> attribute must only be
  specified on <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-19">menu</a></code> elements whose parent element is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-20">menu</a></code> element whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-10">popup
  menu</a> state.</p>
     <div class="impl">
      <hr>
      <p>A <code>menu</code> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="currently-relevant-menu-element">currently relevant <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-21">menu</a></code> element</dfn> if it is the
  child of a <span>currently relevant <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-22">menu</a></code> element</span>, or if it is the <a data-link-type="dfn" href="sec-forms.html#designated-pop-up-menu" id="ref-for-designated-pop-up-menu-4">designated pop-up menu</a> of a <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-32">button</a></code> element that is not <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-1">inert</a>, does not have a <code>hidden</code> attribute, and is not
  the descendant of an element with a <code>hidden</code> attribute.</p>
      <hr>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="menu-construct">menu construct</dfn> consists of an ordered list of zero or more <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="menu-item-constructs">menu item constructs</dfn>, which can be any of:</p>
      <ul class="brief">
       <li><a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-1">Commands</a>, which can be marked as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="default-commands">default commands</dfn> (<code>menuitem</code>)
       </li><li><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="separators">Separators</dfn> (<code>hr</code>)
       </li><li>Other <a data-link-type="dfn" href="interactive-elements.html#menu-construct" id="ref-for-menu-construct-1">menu constructs</a>, each with an associated <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="submenu-label">submenu label</dfn>, which allows the list to be nested (<code>menu</code>)
      </li></ul>
      <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="build and show|build and show a menu" data-noexport="" id="build-and-show">build and show a menu</dfn> for a particular <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-23">menu</a></code> element <var>source</var> and with a particular element <var>subject</var> as a subject, the user agent
  must run the following steps:</p>
      <ol>
       <li>Let <var>pop-up menu</var> be the <a data-link-type="dfn" href="interactive-elements.html#menu-construct" id="ref-for-menu-construct-2">menu construct</a> created by the <a data-link-type="dfn" href="interactive-elements.html#build-a-menu-construct" id="ref-for-build-a-menu-construct-1">build a
    menu construct</a> algorithm when passed the <var>source</var> element. 
       </li><li>
        <p>Display <var>pop-up menu</var> to the user, and let the algorithm that invoked this one continue.</p>
        <p>If the user selects a <a data-link-type="dfn" href="interactive-elements.html#menu-item-constructs" id="ref-for-menu-item-constructs-1">menu item construct</a> that corresponds to an element that still represents a <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-2">command</a> when the user selects it, then the user agent must invoke that
    command’s <a data-link-type="dfn" href="sec-forms.html#action" id="ref-for-action-2">Action</a>. If the command’s <a data-link-type="dfn" href="sec-forms.html#action" id="ref-for-action-3">Action</a> is defined as <a data-link-type="dfn" href="webappapis.html#fire-a-click-event" id="ref-for-fire-a-click-event-1">firing
    a <code>click</code> event</a>, either directly or via the <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps" id="ref-for-running-synthetic-click-activation-steps-3">run
    synthetic click activation steps</a> algorithm, then the <code>relatedTarget</code> attribute of that <code>click</code> event must be initialized to <var>subject</var>.</p>
        <p>Pop-up menus must not, while being shown, reflect changes in the DOM. The menu is constructed
    from the DOM before being shown, and is then immutable.</p>
      </li></ol>
      <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="build-a-menu-construct">build a menu construct</dfn> for an element <var>source</var>, the user agent must run
  the following steps, which return a <a data-link-type="dfn" href="interactive-elements.html#menu-construct" id="ref-for-menu-construct-3">menu construct</a>:</p>
      <ol>
       <li>Let <var>generated menu</var> be an empty <a data-link-type="dfn" href="interactive-elements.html#menu-construct" id="ref-for-menu-construct-4">menu construct</a>.
       </li><li>
        <p>Run the <a data-link-type="dfn" href="interactive-elements.html#menu-item-generator" id="ref-for-menu-item-generator-1">menu item generator</a> steps for the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-24">menu</a></code> element using <var>generated menu</var> as the output.</p>
        <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="menu-item-generator">menu item generator</dfn> steps for a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-25">menu</a></code> element using a specific <a data-link-type="dfn" href="interactive-elements.html#menu-construct" id="ref-for-menu-construct-5">menu construct</a> <var>output</var> as
    output are as follows: For each child node of the <code>menu</code> in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-60">tree order</a>,
    run the appropriate steps from the following list:</p>
        <dl class="switch">
         <dt>If the child is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-5">menuitem</a></code> element that <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-3">defines a command</a>
         </dt><dd>Append the <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-4">command</a> to <var>output</var>, respecting the command’s <a data-link-type="dfn" href="interactive-elements.html#menuitem-facets" id="ref-for-menuitem-facets-1">facets</a>. If the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-6">menuitem</a></code> element has a <code>default</code> attribute, mark the <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-5">command</a> as being a <a data-link-type="dfn" href="interactive-elements.html#default-commands" id="ref-for-default-commands-1">default
      command</a>.
         </dd><dt>If the child is an <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-11">hr</a></code> element
         </dt><dd>Append a <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-1">separator</a> to <var>output</var>.
         </dd><dt>If the child is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-26">menu</a></code> element with no <code>label</code> attribute
         </dt><dd>Append a <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-2">separator</a> to <var>output</var>, then run
      the <a data-link-type="dfn" href="interactive-elements.html#menu-item-generator" id="ref-for-menu-item-generator-2">menu item generator</a> steps for this child <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-27">menu</a></code> element, using <var>output</var> as the output, then append another <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-3">separator</a> to <var>output</var>.
         </dd><dt>If the child is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-28">menu</a></code> element with a <code>label</code> attribute
         </dt><dd>Let <var>submenu</var> be the result of running the <a data-link-type="dfn" href="interactive-elements.html#build-a-menu-construct" id="ref-for-build-a-menu-construct-2">build a menu construct</a> steps for the child <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-29">menu</a></code> element. Then, append <var>submenu</var> to <var>output</var>, using the value of the child <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-30">menu</a></code> element’s <code>label</code> attribute as the <a data-link-type="dfn" href="interactive-elements.html#submenu-label" id="ref-for-submenu-label-1">submenu label</a>.
         </dd><dt>Otherwise
         </dt><dd><a data-link-type="dfn" href="infrastructure.html#ignored" id="ref-for-ignored-3">Ignore</a> the child node.
        </dd></dl>
       </li><li>Remove from <var>output</var> any <a data-link-type="dfn" href="interactive-elements.html#menu-construct" id="ref-for-menu-construct-6">menu construct</a> whose <a data-link-type="dfn" href="interactive-elements.html#submenu-label" id="ref-for-submenu-label-2">submenu
    label</a> is the empty string.
       </li><li>Remove from <var>output</var> any <a data-link-type="dfn" href="interactive-elements.html#menu-item-constructs" id="ref-for-menu-item-constructs-2">menu item construct</a> representing a <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-6">command</a> whose <a data-link-type="dfn" href="sec-forms.html#label" id="ref-for-label-6">Label</a> is
    the empty string.
       </li><li>Collapse all sequences of two or more adjacent <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-4">separators</a> in <var>output</var> to a single <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-5">separator</a>.
       </li><li>If the first <a data-link-type="dfn" href="interactive-elements.html#menu-item-constructs" id="ref-for-menu-item-constructs-3">menu item construct</a> in <var>output</var> is a <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-6">separator</a>, then remove it.
       </li><li>If the last <a data-link-type="dfn" href="interactive-elements.html#menu-item-constructs" id="ref-for-menu-item-constructs-4">menu item construct</a> in <var>output</var> is a <a data-link-type="dfn" href="interactive-elements.html#separators" id="ref-for-separators-7">separator</a>, then remove it.
       </li><li>Return <var>output</var>.
      </li></ol>
      <hr>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuelement-type"><code>type</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-106">reflect</a> the content attribute of the same name, <a data-link-type="dfn" href="infrastructure.html#limited-to-only-known-values" id="ref-for-limited-to-only-known-values-16">limited to only known values</a>.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuelement-label"><code>label</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-107">reflect</a> the content attribute of the same name.</p>
     </div>
     <div class="example" id="example-bb0c7c14">
      <a class="self-link" href="interactive-elements.html#example-bb0c7c14"></a> In this example, the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-31">menu</a></code> element is used to describe a toolbar with three menu
    buttons on it, each of which has a dropdown menu with a series of options: 
<pre class="highlight"><span class="nt">&lt;menu&gt;</span>
  <span class="nt">&lt;li&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">menu</span> <span class="na">value=</span><span class="s">"File"</span> <span class="na">menu=</span><span class="s">"filemenu"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menu</span> <span class="na">id=</span><span class="s">"filemenu"</span> <span class="na">type=</span><span class="s">"context"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"fnew()"</span> <span class="na">label=</span><span class="s">"New..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"fopen()"</span> <span class="na">label=</span><span class="s">"Open..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"fsave()"</span> <span class="na">label=</span><span class="s">"Save"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"fsaveas()"</span> <span class="na">label=</span><span class="s">"Save as..."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/menu&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">menu</span> <span class="na">value=</span><span class="s">"Edit"</span> <span class="na">menu=</span><span class="s">"editmenu"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menu</span> <span class="na">id=</span><span class="s">"editmenu"</span> <span class="na">type=</span><span class="s">"context"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"ecopy()"</span> <span class="na">label=</span><span class="s">"Copy"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"ecut()"</span> <span class="na">label=</span><span class="s">"Cut"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"epaste()"</span> <span class="na">label=</span><span class="s">"Paste"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/menu&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">menu</span> <span class="na">value=</span><span class="s">"Help"</span> <span class="na">menu=</span><span class="s">"helpmenu"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menu</span> <span class="na">id=</span><span class="s">"helpmenu"</span> <span class="na">type=</span><span class="s">"context"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"location='help.html'"</span> <span class="na">label=</span><span class="s">"Help"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;menuitem</span> <span class="na">onclick=</span><span class="s">"location='about.html'"</span> <span class="na">label=</span><span class="s">"About"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/menu&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/menu&gt;</span>
</pre>
      <p>In a supporting user agent, this might look like this (assuming the user has just activated the
    second button):</p>
      <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height="101" src="images/sample-toolbar-1.png" width="303"></p>
     </div>
     <h4 class="heading settled" data-level="4.11.4" id="the-menuitem-element"><span class="secno">4.11.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-menuitem"><code>menuitem</code></dfn> element</span><a class="self-link" href="interactive-elements.html#the-menuitem-element"></a></h4>
     <p class="warning"> The <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-7">menuitem</a></code> element is "at risk".
  If testing during the Candidate Recommendation phase does not identify at least two interoperable implementations
  in current shipping browsers of the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-8">menuitem</a></code> element
  it will be removed from the HTML 5.1 Specification. </p>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-105">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-104">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-32">menu</a></code> element whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-11">popup menu</a> state.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-107">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-17">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-104">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-40">end tag</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-106">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-105">Global attributes</a>
      </dd><dd><code>type</code> - Type of command
      </dd><dd><code>label</code> - User-visible label
      </dd><dd><code>icon</code> - Icon for the command
      </dd><dd><code>disabled</code> Whether the command or control is disabled
      </dd><dd><code>checked</code> Whether the command or control is checked
      </dd><dd><code>radiogroup</code> Name of group of commands to treat as a radio button group
      </dd><dd><code>default</code> - Mark the command as being a default command
      </dd><dd>Also, the <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-menuitem-title" id="ref-for-element-attrdef-menuitem-title-1">title</a></code> attribute has special semantics on this element.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitem"><code>menuitem</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-40"><em>do not set</em></a>).
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-127">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-104">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="interface" data-export="" id="htmlmenuitemelement-htmlmenuitemelement">HTMLMenuItemElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-104">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmlmenuitemelement-type" id="ref-for-dom-htmlmenuitemelement-type-1">type</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmlmenuitemelement-label" id="ref-for-dom-htmlmenuitemelement-label-1">label</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmlmenuitemelement-icon" id="ref-for-dom-htmlmenuitemelement-icon-1">icon</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="interactive-elements.html#dom-htmlmenuitemelement-disabled" id="ref-for-dom-htmlmenuitemelement-disabled-1">disabled</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="interactive-elements.html#dom-htmlmenuitemelement-checked" id="ref-for-dom-htmlmenuitemelement-checked-1">checked</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmlmenuitemelement-radiogroup" id="ref-for-dom-htmlmenuitemelement-radiogroup-1">radiogroup</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="interactive-elements.html#dom-htmlmenuitemelement-default" id="ref-for-dom-htmlmenuitemelement-default-1">default</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-9">menuitem</a></code> element represents a command that the user can invoke from a popup
  menu (either a <a data-link-type="dfn" href="interactive-elements.html#context-menu" id="ref-for-context-menu-1">context menu</a> or the menu of a <a data-link-type="element-state" href="sec-forms.html#element-statedef-button-type-menu" id="ref-for-element-statedef-button-type-menu-6">menu button</a>).</p>
     <p>A <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-10">menuitem</a></code> element that uses one or more of the <code>type</code>, <code>label</code>, <code>icon</code>, <code>disabled</code>, <code>checked</code>, and <code>radiogroup</code> attributes defines a new command.</p>
     <hr>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-type"><code>type</code></dfn> attribute indicates the kind of
  command: either a normal command with an associated action, or a state or option that can be
  toggled, or a selection of one item from a list of items.</p>
     <p>The attribute is an <a data-link-type="dfn" href="infrastructure.html#enumerated-attributes" id="ref-for-enumerated-attributes-20">enumerated attribute</a> with three keywords and states. The
  "<dfn data-dfn-for="menuitem/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-menuitem-type-command"><code>command</code><a class="self-link" href="interactive-elements.html#attr-valuedef-menuitem-type-command"></a></dfn>" keyword maps to the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-command" id="ref-for-statedef-menuitem-command-1">Command</a> state, the "<dfn data-dfn-for="menuitem/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-menuitem-type-checkbox"><code>checkbox</code><a class="self-link" href="interactive-elements.html#attr-valuedef-menuitem-type-checkbox"></a></dfn>" keyword maps to the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-checkbox" id="ref-for-statedef-menuitem-checkbox-1">Checkbox</a> state, and the "<dfn data-dfn-for="menuitem/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-menuitem-type-radio"><code>radio</code><a class="self-link" href="interactive-elements.html#attr-valuedef-menuitem-type-radio"></a></dfn>" keyword maps to the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-radio" id="ref-for-statedef-menuitem-radio-1">Radio</a> state. The <i>missing value default</i> is the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-command" id="ref-for-statedef-menuitem-command-2">Command</a> state.</p>
     <dl>
      <dt>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="state" data-export="" id="statedef-menuitem-command">Command</dfn> state
      </dt><dd>The element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-168">represents</a> a normal command with an associated action.
      </dd><dt>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="state" data-export="" id="statedef-menuitem-checkbox">Checkbox</dfn> state
      </dt><dd>The element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-169">represents</a> a state or option that can be toggled.
      </dd><dt>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="state" data-export="" id="statedef-menuitem-radio">Radio</dfn> state
      </dt><dd>The element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-170">represents</a> a selection of one item from a list of items.
     </dd></dl>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-label"><code>label</code></dfn> attribute gives the name of the
  command, as shown to the user. If the attribute is
  specified, it must have a value that is not the empty string.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-icon"><code>icon</code></dfn> attribute gives a picture that
  represents the command. If the attribute is specified, the attribute’s value must contain a <a data-link-type="dfn" href="infrastructure.html#valid-non-empty-url-potentially-surrounded-by-spaces" id="ref-for-valid-non-empty-url-potentially-surrounded-by-spaces-12">valid non-empty URL potentially surrounded by spaces</a>. <span class="impl">To obtain
  the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#syntax-url-absolute">absolute URL</a> of the icon when the attribute’s value is not the empty string, the
  attribute’s value must be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#resolve-promise">resolved</a> relative to the element.
  When the attribute is absent, or its value is the empty string, or <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-31">parsing</a> its value fails, there is no icon.</span></p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-disabled"><code>disabled</code></dfn> attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-28">boolean attribute</a> that, if present, indicates that the command is not available in
  the current state.</p>
     <p class="note" role="note"> The distinction between <code>disabled</code> and <code>hidden</code> is subtle. A command would be disabled if, in the same
  context, it could be enabled if only certain aspects of the situation were changed. A command
  would be marked as hidden if, in that situation, the command will never be enabled. For example,
  in the context menu for a water faucet, the command "open" might be disabled if the faucet is
  already open, but the command "eat" would be marked hidden since the faucet could never be
  eaten. </p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-checked"><code>checked</code></dfn> attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-29">boolean
  attribute</a> that, if present, indicates that the command is selected. The attribute must be
  omitted unless the <code>type</code> attribute is in either the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-checkbox" id="ref-for-statedef-menuitem-checkbox-2">Checkbox</a> state or the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-radio" id="ref-for-statedef-menuitem-radio-2">Radio</a> state.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-radiogroup"><code>radiogroup</code></dfn> attribute gives the
  name of the group of commands that will be toggled when the command itself is toggled, for
  commands whose <code>type</code> attribute has the value "<code>radio</code>". The scope of the name is the child list of the parent element. The
  attribute must be omitted unless the <code>type</code> attribute is in
  the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-radio" id="ref-for-statedef-menuitem-radio-3">Radio</a> state. When specified, the
  attribute’s value must be a non-empty string.</p>
     <hr>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-title"><code>title</code></dfn> attribute gives a hint describing
  the command, which might be shown to the user to help him.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="element-attr" data-export="" id="element-attrdef-menuitem-default"><code>default</code></dfn> attribute indicates, if
  present, that the command is the one that would have been invoked if the user had directly
  activated the menu’s subject instead of using the menu. The <code>default</code> attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-30">boolean attribute</a>.</p>
     <div class="impl">
      <hr>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-type"><code>type</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-108">reflect</a> the content attribute of the same name, <a data-link-type="dfn" href="infrastructure.html#limited-to-only-known-values" id="ref-for-limited-to-only-known-values-17">limited to only known
  values</a>.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-label"><code>label</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-icon"><code>icon</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-disabled"><code>disabled</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-checked"><code>checked</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-radiogroup"><code>radiogroup</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMenuItemElement" data-dfn-type="attribute" data-export="" id="dom-htmlmenuitemelement-default"><code>default</code></dfn> IDL attributes must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-109">reflect</a> the respective content attributes of the same name.</p>
      <hr>
      <p>If the element’s <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-1">Disabled State</a> is false
  (enabled) then the element’s <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-31">activation behavior</a> depends on the element’s <code>type</code> attribute, as follows:</p>
      <dl class="switch">
       <dt>If the <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-checkbox" id="ref-for-element-statedef-input-checkbox-10">Checkbox</a> state
       </dt><dd>If the element has a <code>checked</code> attribute, the user agent
    must remove that attribute. Otherwise, the user agent must add a <code>checked</code> attribute, with the literal value "<code>checked</code>".
       </dd><dt>If the <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menuitem-radio" id="ref-for-statedef-menuitem-radio-4">Radio</a> state
       </dt><dd>
        If the element has a parent, then the user agent must walk the list of child nodes of that parent
    element, and for each node that is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-11">menuitem</a></code> element, if that element has a <code>radiogroup</code> attribute whose value exactly matches the
    current element’s (treating missing <code>radiogroup</code> attributes as if they were the empty string), and has a <code>checked</code> attribute, must remove that attribute. 
        <p>Then, the element’s <code>checked</code> attribute must be set
    to the literal value "<code>checked</code>".</p>
       <p></p>
       </dd><dt>Otherwise
       </dt><dd>The element’s <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-32">activation behavior</a> is to do nothing.
      </dd></dl>
      <p class="note" role="note"> Firing a synthetic <code>click</code> event at the element
  does not cause any of the actions described above to happen. </p>
      <p>If the element’s <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-2">Disabled State</a> is true
  (disabled) then the element has no <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-33">activation behavior</a>.</p>
     </div>
     <p class="note" role="note"> The <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-12">menuitem</a></code> element is not rendered except as <a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-33">part of a popup menu</a>. </p>
     <div class="example" id="example-20ecde27">
      <a class="self-link" href="interactive-elements.html#example-20ecde27"></a> Here is an example of a pop-up menu button with three options that let the user toggle between
    left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The
    menu also has a separator followed by another menu item labeled "Publish", though that menu item
    is disabled. 
<pre class="highlight"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">menu</span> <span class="na">menu=</span><span class="s">editmenu</span><span class="nt">&gt;</span>Commands...<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;menu</span> <span class="na">type=</span><span class="s">"context"</span> <span class="na">id=</span><span class="s">"editmenu"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">radiogroup=</span><span class="s">"alignment"</span> <span class="na">checked=</span><span class="s">"checked"</span>
          <span class="na">label=</span><span class="s">"Left"</span> <span class="na">icon=</span><span class="s">"icons/alL.png"</span> <span class="na">onclick=</span><span class="s">"setAlign('left')"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">radiogroup=</span><span class="s">"alignment"</span>
          <span class="na">label=</span><span class="s">"Center"</span> <span class="na">icon=</span><span class="s">"icons/alC.png"</span> <span class="na">onclick=</span><span class="s">"setAlign('center')"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">radiogroup=</span><span class="s">"alignment"</span>
          <span class="na">label=</span><span class="s">"Right"</span> <span class="na">icon=</span><span class="s">"icons/alR.png"</span> <span class="na">onclick=</span><span class="s">"setAlign('right')"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;hr&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">type=</span><span class="s">"command"</span> <span class="na">disabled</span>
          <span class="na">label=</span><span class="s">"Publish"</span> <span class="na">icon=</span><span class="s">"icons/pub.png"</span> <span class="na">onclick=</span><span class="s">"publish()"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/menu&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.11.5" id="context-menus"><span class="secno">4.11.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="context menu" data-noexport="" id="context-menu">Context menus</dfn></span><a class="self-link" href="interactive-elements.html#context-menus"></a></h4>
     <h5 class="heading settled" data-level="4.11.5.1" id="declaring-a-context-menu"><span class="secno">4.11.5.1. </span><span class="content">Declaring a context menu</span><a class="self-link" href="interactive-elements.html#declaring-a-context-menu"></a></h5>
     <p>The <dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-contextmenu"><code>contextmenu</code></dfn> attribute gives the element’s
  context menu. The value must be the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-id">ID</a> of a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-34">menu</a></code> element in the same <a data-link-type="dfn" href="infrastructure.html#home-subtree" id="ref-for-home-subtree-10">home subtree</a> whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-12">popup menu</a> state.</p>
     <p class="warning"> The <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-3">contextmenu</a></code> attribute is "at risk".
  If testing during the Candidate Recommendation phase does not identify at least two interoperable implementations
  in current shipping browsers of the <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-4">contextmenu</a></code> attribute
  it will be removed from the HTML 5.1 Specification. </p>
     <p class="note" role="note"> When a user right-clicks on an element with a <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-5">contextmenu</a></code> attribute, the user agent will first fire a <code>contextmenu</code> event at the element, and then, if that event is not
  canceled, a <code>show</code> event at the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-35">menu</a></code> element. </p>
     <div class="example" id="example-13744a2c">
      <a class="self-link" href="interactive-elements.html#example-13744a2c"></a> Here is an example of a context menu for an input control: 
<pre class="highlight"><span class="nt">&lt;form</span> <span class="na">name=</span><span class="s">"npc"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label&gt;</span>Character name: <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">char</span> <span class="na">type=</span><span class="s">text</span> <span class="na">contextmenu=</span><span class="s">namemenu</span> <span class="na">required</span><span class="nt">&gt;&lt;/label&gt;</span>
  <span class="nt">&lt;menu</span> <span class="na">type=</span><span class="s">context</span> <span class="na">id=</span><span class="s">namemenu</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">label=</span><span class="s">"Pick random name"</span> <span class="na">onclick=</span><span class="s">"document.forms.npc.elements.char.value = getRandomName()"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">label=</span><span class="s">"Prefill other fields based on name"</span> <span class="na">onclick=</span><span class="s">"prefillFields(document.forms.npc.elements.char.value)"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/menu&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</pre>
      <p>This adds two items to the control’s context menu, one called "Pick random name", and one
    called "Prefill other fields based on name". They invoke scripts that are not shown in the
    example above.</p>
     </div>
     <div class="impl">
      <h5 class="heading settled" data-level="4.11.5.2" id="context-menu-processing-model"><span class="secno">4.11.5.2. </span><span class="content">Processing model</span><a class="self-link" href="interactive-elements.html#context-menu-processing-model"></a></h5>
      <p>Each element has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="assigned-context-menu">assigned context menu</dfn>, which can be null. If an element <var>A</var> has a <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-6">contextmenu</a></code> attribute, and there is
  an element with the ID given by <var>A</var>’s <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-7">contextmenu</a></code> attribute’s value in <var>A</var>’s <a data-link-type="dfn" href="infrastructure.html#home-subtree" id="ref-for-home-subtree-11">home subtree</a>, and the first such element in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-61">tree order</a> is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-36">menu</a></code> element whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-13">popup menu</a> state, then <var>A</var>’s <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-1">assigned
  context menu</a> is that element. Otherwise, if <var>A</var> has a parent element,
  then <var>A</var>’s <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-2">assigned context menu</a> is the <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-3">assigned context
  menu</a> of its parent element. Otherwise, <var>A</var>’s <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-4">assigned context
  menu</a> is null.</p>
      <p>When an element’s context menu is requested (e.g., by the user right-clicking the element, or
  pressing a context menu key), the user agent must apply the appropriate rules from the following
  list:</p>
      <dl class="switch">
       <dt>If the user requested a context menu using a pointing device
       </dt><dd>The user agent must <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-134">fire</a> a <a data-link-type="dfn" href="infrastructure.html#trusted" id="ref-for-trusted-11">trusted</a> event with the name <code>contextmenu</code>, that bubbles and is cancelable, and that uses the <code>MouseEvent</code> interface, at the element for which the menu was requested. The context
    information of the event must be initialized to the same values as the last <code>MouseEvent</code> user interaction event that was fired as part of the gesture that was
    interpreted as a request for the context menu.
       </dd><dt>Otherwise
       </dt><dd>The user agent must <a data-link-type="dfn" href="webappapis.html#fire-a-synthetic-mouse-event-named-contextmenu" id="ref-for-fire-a-synthetic-mouse-event-named-contextmenu-1">fire a synthetic mouse
    event named <code>contextmenu</code></a> that bubbles and is
    cancelable at the element for which the menu was requested.
      </dd></dl>
      <p class="note" role="note"> Typically, therefore, the firing of the <code>contextmenu</code> event will be the default action of a <code>mouseup</code> or <code>keyup</code> event. The exact
  sequence of events is user agent-dependent, as it will vary based on platform conventions. </p>
      <p>The default action of the <code>contextmenu</code> event depends on
  whether or not the element for which the menu was requested has a non-null <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-5">assigned context
  menu</a> when the event dispatch has completed, as follows.</p>
      <p>If the <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-6">assigned context menu</a> of the element for which the menu was requested is
  null, the default action must be for the user agent to show its default context menu, if it has
  one.</p>
      <p>Otherwise, let <var>subject</var> be the element for which the menu was requested, and let <var>menu</var> be the <a data-link-type="dfn" href="interactive-elements.html#assigned-context-menu" id="ref-for-assigned-context-menu-7">assigned context menu</a> of <var>target</var> immediately after
  the <code>contextmenu</code> event’s dispatch has completed. The user
  agent must <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-135">fire</a> a <a data-link-type="dfn" href="infrastructure.html#trusted" id="ref-for-trusted-12">trusted</a> event with the name <code>show</code> at <var>menu</var>, using the <code>RelatedEvent</code> interface,
  with the <code>relatedTarget</code> attribute initialized
  to <var>subject</var>. The event must be cancelable.</p>
      <p>If <em>this</em> event (the <code>show</code> event) is not canceled, then
  the user agent must <a data-link-type="dfn" href="interactive-elements.html#build-and-show" id="ref-for-build-and-show-2">build and show</a> the menu for <var>menu</var> with <var>subject</var> as the subject.</p>
      <p>The user agent may also provide access to its default context menu, if any, with the context
  menu shown. For example, it could merge the menu items from the two menus together, or provide the
  page’s context menu as a submenu of the default menu. In general, user agents are encouraged to
  de-emphasize their own contextual menu items, so as to give the author’s context menu the
  appearance of legitimacy — to allow documents to feel like "applications" rather than "mere
  Web pages".</p>
      <p>User agents may provide means for bypassing the context menu processing model, ensuring that
  the user can always access the user agent’s default context menus. For example, the user agent could
  handle right-clicks that have the Shift key depressed in such a way that it does not fire the <code>contextmenu</code> event and instead always shows the default
  context menu.</p>
      <hr>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" id="dom-htmlelement-contextmenu"><code>contextMenu</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-110">reflect</a> the <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-8">contextmenu</a></code> content attribute.</p>
     </div>
     <div class="example" id="example-e5c085bb">
      <a class="self-link" href="interactive-elements.html#example-e5c085bb"></a> In this example, an image of cats is given a context menu with four possible commands: 
<pre class="highlight"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"cats.jpeg"</span> <span class="na">alt=</span><span class="s">"Cats"</span> <span class="na">contextmenu=</span><span class="s">catsmenu</span><span class="nt">&gt;</span>
<span class="nt">&lt;menu</span> <span class="na">type=</span><span class="s">"context"</span> <span class="na">id=</span><span class="s">"catsmenu"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">label=</span><span class="s">"Pet the kittens"</span> <span class="na">onclick=</span><span class="s">"kittens.pet()"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">label=</span><span class="s">"Cuddle with the kittens"</span> <span class="na">onclick=</span><span class="s">"kittens.cuddle()"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menu</span> <span class="na">label=</span><span class="s">"Feed the kittens"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">label=</span><span class="s">"Fish"</span> <span class="na">onclick=</span><span class="s">"kittens.feed(fish)"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;menuitem</span> <span class="na">label=</span><span class="s">"Chicken"</span> <span class="na">onclick=</span><span class="s">"kittens.feed(chicken)"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/menu&gt;</span>
<span class="nt">&lt;/menu&gt;</span>
</pre>
      <p>When a user of a mouse-operated visual Web browser right-clicks on the image, the browser
    might pop up a context menu like this:</p>
      <p><img alt="A context menu, shown over a picture of cats, with four lines: the first two offering the menu items described in the markup above ('Pet the kittens' and 'Cuddle with the kittens'), the third giving a submenu labeled 'Feed the kittens', and the fourth, after a horizontal splitter, consisting of only a downwards-pointing disclosure triangle." src="images/contextmenu-collapsed.png"></p>
      <p>When the user clicks the disclosure triangle, such a user agent would expand the context menu
    in place, to show the browser’s own commands:</p>
      <p><img alt="This would result in the same basic interface, but with a longer menu; the disclosure triangle having been replaced by items such as 'View Image', 'Copy Image', 'Copy Image Location', and so forth." src="images/contextmenu-expanded.png"></p>
     </div>
     <h5 class="heading settled" data-level="4.11.5.3" id="the-relatedevent-interfaces"><span class="secno">4.11.5.3. </span><span class="content">The <code>RelatedEvent</code> interfaces</span><a class="self-link" href="interactive-elements.html#the-relatedevent-interfaces"></a></h5>
<pre class="idl highlight def" data-highlight="webidl">[<dfn class="nv idl-code" data-dfn-for="RelatedEvent" data-dfn-type="constructor" data-export="" data-lt="RelatedEvent(type, eventInitDict)|RelatedEvent(type)" id="dom-relatedevent-relatedevent">Constructor<a class="self-link" href="interactive-elements.html#dom-relatedevent-relatedevent"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="RelatedEvent/RelatedEvent(type, eventInitDict)" data-dfn-type="argument" data-export="" id="dom-relatedevent-relatedevent-type-eventinitdict-type">type<a class="self-link" href="interactive-elements.html#dom-relatedevent-relatedevent-type-eventinitdict-type"></a></dfn>, <span class="kt">optional</span> <a class="n" data-link-type="idl-name" href="interactive-elements.html#dictdef-relatedevent-relatedeventinit" id="ref-for-dictdef-relatedevent-relatedeventinit-1">RelatedEventInit</a> <dfn class="nv idl-code" data-dfn-for="RelatedEvent/RelatedEvent(type, eventInitDict)" data-dfn-type="argument" data-export="" id="dom-relatedevent-relatedevent-type-eventinitdict-eventinitdict">eventInitDict<a class="self-link" href="interactive-elements.html#dom-relatedevent-relatedevent-type-eventinitdict-eventinitdict"></a></dfn>)]
<span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="RelatedEvent" data-dfn-type="interface" data-export="" id="relatedevent-relatedevent">RelatedEvent</dfn> : <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#event">Event</a> {
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#eventtarget">EventTarget</a>? <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="EventTarget?" href="interactive-elements.html#dom-relatedevent-relatedtarget" id="ref-for-dom-relatedevent-relatedtarget-1">relatedTarget</a>;
};

<span class="kt">dictionary</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="RelatedEvent" data-dfn-type="dictionary" data-export="" id="dictdef-relatedevent-relatedeventinit">RelatedEventInit</dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit">EventInit</a> {
  <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#eventtarget">EventTarget</a>? <dfn class="nv idl-code" data-dfn-for="RelatedEventInit" data-dfn-type="dict-member" data-export="" data-type="EventTarget? " id="dom-relatedeventinit-relatedtarget">relatedTarget<a class="self-link" href="interactive-elements.html#dom-relatedeventinit-relatedtarget"></a></dfn>;
};
</pre>
     <dl class="domintro">
      <dt><var>event</var> . <code>relatedTarget</code>
      </dt><dd>
       <p>Returns the other event target involved in this event. For example, when a <code>show</code> event fires on a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-37">menu</a></code> element, the other event
    target involved in the event would be the element for which the menu is being shown.</p>
     </dd></dl>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="RelatedEvent" data-dfn-type="attribute" data-export="" id="dom-relatedevent-relatedtarget"><code>relatedTarget</code></dfn> attribute must
  return the value it was initialized to. When the object is created, this attribute must be
  initialized to null. It represents the other event target that is related to the event.</p>
     </div>
     <h4 class="heading settled" data-level="4.11.6" id="commands"><span class="secno">4.11.6. </span><span class="content">Commands</span><a class="self-link" href="interactive-elements.html#commands"></a></h4>
     <h5 class="heading settled" data-level="4.11.6.1" id="facets"><span class="secno">4.11.6.1. </span><span class="content">Facets</span><a class="self-link" href="interactive-elements.html#facets"></a></h5>
     <p>A <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="dfn" data-lt="defines a command|command" data-noexport="" id="menuitem-defines-a-command">command</dfn> is the abstraction behind menu items, buttons, and
  links. Once a command is defined, other parts of the interface can refer to the same command,
  allowing many access points to a single feature to share facets such as the <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-3">Disabled State</a>.</p>
     <p>Commands are defined to have the following <dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="dfn" data-noexport="" id="menuitem-facets">facets</dfn>:</p>
     <dl>
      <dt><dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="facet" data-export="" id="facetdef-menuitem-label">Label</dfn>
      </dt><dd>The name of the command as seen by the user.
      </dd><dt><dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="facet" data-export="" id="facetdef-menuitem-access-key">Access Key</dfn>
      </dt><dd>A key combination selected by the user agent that triggers the command. A command might not
    have an Access Key.
      </dd><dt><dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="facet" data-export="" id="facetdef-menuitem-hidden-state">Hidden State</dfn>
      </dt><dd>Whether the command is hidden or not (basically, whether it should be shown in menus).
      </dd><dt><dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="facet" data-export="" id="facetdef-menuitem-disabled-state">Disabled State</dfn>
      </dt><dd>Whether the command is relevant and can be triggered or not.
      </dd><dt><dfn class="dfn-paneled" data-dfn-for="menuitem" data-dfn-type="facet" data-export="" id="facetdef-menuitem-action">Action</dfn>
      </dt><dd>The actual effect that triggering the command will have. This could be a scripted event
    handler, a <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a> to which to <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-34">navigate</a>, or a form submission.
     </dd></dl>
     <p>User agents may expose the <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-7">commands</a> that match the following criteria:</p>
     <ul class="brief">
      <li>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-1">Hidden State</a> facet is false (visible)
      </li><li>The element is <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-16">in a <code>Document</code></a> that has an associated <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-73">browsing context</a>.
      </li><li>Neither the element nor any of its ancestors has a <code>hidden</code> attribute specified.
      </li><li>The element is not a <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-13">menuitem</a></code> element, or it is a child of a <a data-link-type="dfn" href="interactive-elements.html#currently-relevant-menu-element" id="ref-for-currently-relevant-menu-element-1">currently
    relevant <code>menu</code> element</a>, or it has an <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-1">Access Key</a>.
     </li></ul>
     <p>User agents are encouraged to do this especially for commands that have <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-2">Access Keys</a>, as a way to advertise those keys to the
  user.</p>
     <p class="example" id="example-126e5418"><a class="self-link" href="interactive-elements.html#example-126e5418"></a>For example, such commands could be listed in the user agent’s menu bar.</p>
     <div class="impl">
      <h5 class="heading settled" data-level="4.11.6.2" id="using-the-a-element-to-define-a-command"><span class="secno">4.11.6.2. </span><span class="content">Using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-79">a</a></code> element to define a command</span><a class="self-link" href="interactive-elements.html#using-the-a-element-to-define-a-command"></a></h5>
      <p>An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-80">a</a></code> element with an <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-24">href</a></code> attribute defines a command.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-1">Label</a> of the command is the string given by the
  element’s <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-3">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-1">assigned access key</a>, if any.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-2">Hidden State</a> of the command is true (hidden)
  if the element has a <code>hidden</code> attribute, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-4">Disabled State</a> facet of the command is
  true if the element or one of its ancestors is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-2">inert</a>, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-1">Action</a> of the command, if the element has a
  defined <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-34">activation behavior</a>, is to <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps" id="ref-for-running-synthetic-click-activation-steps-4">run synthetic click activation steps</a> on the element. Otherwise, it is just to <a data-link-type="dfn" href="webappapis.html#fire-a-click-event" id="ref-for-fire-a-click-event-2">fire a <code>click</code> event</a> at the element.</p>
      <h5 class="heading settled" data-level="4.11.6.3" id="using-the-button-element-to-define-a-command"><span class="secno">4.11.6.3. </span><span class="content">Using the <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-33">button</a></code> element to define a command</span><a class="self-link" href="interactive-elements.html#using-the-button-element-to-define-a-command"></a></h5>
      <p>A <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-34">button</a></code> element always <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-8">defines a command</a>.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-2">Label</a>, <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-4">Access Key</a>, <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-3">Hidden State</a>, and <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-2">Action</a> facets of the command are determined <span>as for <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-81">a</a></code> elements</span> (see the previous section).</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-5">Disabled State</a> of the command is true if
  the element or one of its ancestors is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-3">inert</a>, or if the element’s disabled state is set, and false otherwise.</p>
      <h5 class="heading settled" data-level="4.11.6.4" id="using-the-input-element-to-define-a-command"><span class="secno">4.11.6.4. </span><span class="content">Using the <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-266">input</a></code> element to define a command</span><a class="self-link" href="interactive-elements.html#using-the-input-element-to-define-a-command"></a></h5>
      <p>An <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-267">input</a></code> element whose <code>type</code> attribute is in
  one of the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-submit-button" id="ref-for-element-statedef-input-submit-button-14">submit button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-reset-button" id="ref-for-element-statedef-input-reset-button-5">reset button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-16">Image
  Button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-button" id="ref-for-element-statedef-input-button-4">Button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-radio-button" id="ref-for-element-statedef-input-radio-button-12">Radio Button</a>, or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-checkbox" id="ref-for-element-statedef-input-checkbox-11">Checkbox</a> states <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-9">defines a command</a>.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-3">Label</a> of the command is determined as
  follows:</p>
      <ul>
       <li>If the <code>type</code> attribute is in one of the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-submit-button" id="ref-for-element-statedef-input-submit-button-15">submit button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-reset-button" id="ref-for-element-statedef-input-reset-button-6">reset button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-17">Image
    Button</a>, or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-button" id="ref-for-element-statedef-input-button-5">Button</a> states, then the <a data-link-type="dfn" href="sec-forms.html#label" id="ref-for-label-7">Label</a> is the string given by the <code>value</code> attribute, if any, and a user agent-dependent,
    locale-dependent value that the user agent uses to label the button itself if the attribute is
    absent.
       </li><li>Otherwise, if the element is a <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-8">labeled control</a>, then the <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-4">Label</a> is the string given by the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> of the first <code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-49">label</a></code> element in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-62">tree order</a> whose <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-9">labeled control</a> is the element in question. (In DOM terms, this is the
    string given by <code><var>element</var>.labels[0].textContent</code>.)
       </li><li>Otherwise, if the <code>value</code> attribute is present, then
    the <a data-link-type="dfn" href="sec-forms.html#label" id="ref-for-label-8">Label</a> is the value of that attribute.
       </li><li>Otherwise, the <a data-link-type="dfn" href="sec-forms.html#label" id="ref-for-label-9">Label</a> is the empty string.
      </li></ul>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-5">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-2">assigned access key</a>, if any.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-4">Hidden State</a> of the command is true (hidden)
  if the element has a <code>hidden</code> attribute, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-6">Disabled State</a> of the command is true if
  the element or one of its ancestors is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-4">inert</a>, or if the element’s disabled state is set, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-3">Action</a> of the command, if the element has a
  defined <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-35">activation behavior</a>, is to <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps" id="ref-for-running-synthetic-click-activation-steps-5">run synthetic click activation steps</a> on the element. Otherwise, it is just to <a data-link-type="dfn" href="webappapis.html#fire-a-click-event" id="ref-for-fire-a-click-event-3">fire a <code>click</code> event</a> at the element.</p>
      <h5 class="heading settled" data-level="4.11.6.5" id="using-the-option-element-to-define-a-command"><span class="secno">4.11.6.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="menu command" data-noexport="" id="menu-command">Using the <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-96">option</a></code> element to define a command</dfn></span><a class="self-link" href="interactive-elements.html#using-the-option-element-to-define-a-command"></a></h5>
      <p>An <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-97">option</a></code> element with an ancestor <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-97">select</a></code> element and either no <code>value</code> attribute or a <code>value</code> attribute that is not the empty string defines a command.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-5">Label</a> of the command is the value of the <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-98">option</a></code> element’s <code>label</code> attribute, if there is
  one, or else the value of <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-99">option</a></code> element’s <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute,
  with <a data-link-type="dfn" href="infrastructure.html#strip-leading-and-trailing-whitespace" id="ref-for-strip-leading-and-trailing-whitespace-12">leading and trailing whitespace
  stripped</a>, and with any sequences of two or more <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-55">space
  characters</a> replaced by a single U+0020 SPACE character.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-6">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-3">assigned access key</a>, if any.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-5">Hidden State</a> of the command is true (hidden)
  if the element has a <code>hidden</code> attribute, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-7">Disabled State</a> of the command is true if
  the element is disabled, or if its nearest ancestor <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-98">select</a></code> element is disabled, or if it or one
  of its ancestors is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-5">inert</a>, and false otherwise.</p>
      <p>If the <code>option</code>’s nearest ancestor <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-99">select</a></code> element has a <code>multiple</code> attribute, the <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-4">Action</a> of the command is to <a data-link-type="dfn" href="sec-forms.html#picked" id="ref-for-picked-1">pick</a> the <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-100">option</a></code> element. Otherwise, the <a data-link-type="dfn" href="sec-forms.html#action" id="ref-for-action-4">Action</a> is to <a data-link-type="dfn" href="sec-forms.html#toggle" id="ref-for-toggle-2">toggle</a> the <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-101">option</a></code> element.</p>
      <h5 class="heading settled" data-level="4.11.6.6" id="using-the-menuitem-element-to-define-a-command"><span class="secno">4.11.6.6. </span><span class="content">Using the <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-14">menuitem</a></code> element to define a
  command</span><a class="self-link" href="interactive-elements.html#using-the-menuitem-element-to-define-a-command"></a></h5>
      <p>A <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-15">menuitem</a></code> element always <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-10">defines a command</a>.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-6">Label</a> of the command is the value of the element’s <code>label</code> attribute, if there is one, or the empty string if
  it doesn’t.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-7">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-4">assigned access key</a>, if any.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-6">Hidden State</a> of the command is true (hidden)
  if the element has a <code>hidden</code> attribute, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-8">Disabled State</a> of the command is true if
  the element or one of its ancestors is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-6">inert</a>, or if the element has a <code>disabled</code> attribute, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-5">Action</a> of the command, if the element has a
  defined <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-36">activation behavior</a>, is to <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps" id="ref-for-running-synthetic-click-activation-steps-6">run synthetic click activation steps</a> on the element. Otherwise, it is just to <a data-link-type="dfn" href="webappapis.html#fire-a-click-event" id="ref-for-fire-a-click-event-4">fire a <code>click</code> event</a> at the element.</p>
      <h5 class="heading settled" data-level="4.11.6.7" id="using-the-accesskey-attribute-on-a-label-element-to-define-a-command"><span class="secno">4.11.6.7. </span><span class="content">Using the <code>accesskey</code> attribute
  on a <code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-50">label</a></code> element to define a command</span><a class="self-link" href="interactive-elements.html#using-the-accesskey-attribute-on-a-label-element-to-define-a-command"></a></h5>
      <p>A <code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-51">label</a></code> element that has an <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-5">assigned access key</a> and a <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-10">labeled
  control</a> and whose <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-11">labeled control</a> <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-11">defines a command</a>, itself defines a command.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-7">Label</a> of the command is the string given by the
  element’s <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-8">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-6">assigned access key</a>.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-7">Hidden State</a>, <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-9">Disabled State</a>, and <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-6">Action</a> facets of the command are the same as the respective
  facets of the element’s <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-12">labeled control</a>.</p>
      <h5 class="heading settled" data-level="4.11.6.8" id="using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"><span class="secno">4.11.6.8. </span><span class="content">Using the <code>accesskey</code> attribute
  on a <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-11">legend</a></code> element to define a command</span><a class="self-link" href="interactive-elements.html#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"></a></h5>
      <p>A <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-12">legend</a></code> element that has an <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-7">assigned access key</a> and is a child of a <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-33">fieldset</a></code> element that has a descendant that is not a descendant of the <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-13">legend</a></code> element and is neither a <code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-52">label</a></code> element nor a <code>legend</code> element but that defines a command, itself defines a command.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-8">Label</a> of the command is the string given by the
  element’s <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-9">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-8">assigned access key</a>.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-8">Hidden State</a>, <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-10">Disabled State</a>, and <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-7">Action</a> facets of the command are the same as the respective
  facets of the first element in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-63">tree order</a> that is a descendant of the parent of the <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-14">legend</a></code> element that defines a command but is not
  a descendant of the <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-15">legend</a></code> element and is neither a <code>label</code> nor a <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-16">legend</a></code> element.</p>
      <h5 class="heading settled" data-level="4.11.6.9" id="using-the-accesskey-attribute-to-define-a-command-on-other-elements"><span class="secno">4.11.6.9. </span><span class="content">Using the <code>accesskey</code> attribute to define a command on other elements</span><a class="self-link" href="interactive-elements.html#using-the-accesskey-attribute-to-define-a-command-on-other-elements"></a></h5>
      <p>An element that has an <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-9">assigned access key</a> <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-12">defines a command</a>.</p>
      <p>If one of the earlier sections that define elements that <a data-link-type="dfn" href="interactive-elements.html#menuitem-defines-a-command" id="ref-for-menuitem-defines-a-command-13">define commands</a> define that this element defines a command,
  then that section applies to this element, and this section does not. Otherwise, this section
  applies to that element.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-9">Label</a> of the command depends on the element. If
  the element is a <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-13">labeled control</a>, the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> of the first <code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-53">label</a></code> element in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-64">tree order</a> whose <a data-link-type="dfn" href="sec-forms.html#labeled-control" id="ref-for-labeled-control-14">labeled control</a> is the
  element in question is the <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-label" id="ref-for-facetdef-menuitem-label-10">Label</a> (in DOM terms, this is
  the string given by <code><var>element</var>.labels[0].textContent</code>). Otherwise,
  the <a data-link-type="dfn" href="sec-forms.html#label" id="ref-for-label-10">Label</a> is the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> of the element
  itself.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-access-key" id="ref-for-facetdef-menuitem-access-key-10">Access Key</a> of the command is the element’s <a data-link-type="dfn" href="editing.html#assigned-access-key" id="ref-for-assigned-access-key-10">assigned access key</a>.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-hidden-state" id="ref-for-facetdef-menuitem-hidden-state-9">Hidden State</a> of the command is true (hidden)
  if the element has a <code>hidden</code> attribute, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-disabled-state" id="ref-for-facetdef-menuitem-disabled-state-11">Disabled State</a> of the command is true if
  the element or one of its ancestors is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-7">inert</a>, and false otherwise.</p>
      <p>The <a data-link-type="facet" href="interactive-elements.html#facetdef-menuitem-action" id="ref-for-facetdef-menuitem-action-8">Action</a> of the command is to run the following
  steps:</p>
      <ol>
       <li>Run the <a data-link-type="dfn" href="editing.html#focusing-steps" id="ref-for-focusing-steps-5">focusing steps</a> for the element.
       </li><li>If the element has a defined <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-37">activation behavior</a>, <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps" id="ref-for-running-synthetic-click-activation-steps-7">run synthetic click
    activation steps</a> on the element.
       </li><li>Otherwise, if the element does not have a defined <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-38">activation behavior</a>, <a data-link-type="dfn" href="webappapis.html#fire-a-click-event" id="ref-for-fire-a-click-event-5">fire a <code>click</code> event</a> at the element.
      </li></ol>
     </div>
     <h4 class="heading settled" data-level="4.11.7" id="the-dialog-element"><span class="secno">4.11.7. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-dialog"><code>dialog</code></dfn> element</span><a class="self-link" href="interactive-elements.html#the-dialog-element"></a></h4>
     <p class="warning"> The <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-9">dialog</a></code> element is "at risk".
  If testing during the Candidate Recommendation phase does not identify at least two interoperable implementations
  in current shipping browsers of the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-10">dialog</a></code> element
  it will be removed from the HTML 5.1 Specification. </p>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-106">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-135">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-24">Sectioning root</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-105">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-136">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-108">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-137">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-105">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-107">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-106">Global attributes</a>
      </dd><dd><code>open</code> - Whether the dialog box is showing
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#dialog"><code>dialog</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-41"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#alertdialog"><code>alertdialog</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#application"><code>application</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#marquee"><code>marquee</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#status"><code>status</code></a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-128">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-105">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLDialogElement" data-dfn-type="interface" data-export="" id="htmldialogelement-htmldialogelement">HTMLDialogElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-105">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="interactive-elements.html#dom-htmldialogelement-open" id="ref-for-dom-htmldialogelement-open-1">open</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="interactive-elements.html#dom-htmldialogelement-returnvalue" id="ref-for-dom-htmldialogelement-returnvalue-1">returnValue</a>;
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="interactive-elements.html#dom-htmldialogelement-show" id="ref-for-dom-htmldialogelement-show-1">show</a>(<span class="kt">optional</span> (<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/uievents/#interface-MouseEvent">MouseEvent</a> <span class="kt">or</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#interface-element">Element</a>) <dfn class="nv idl-code" data-dfn-for="HTMLDialogElement/show(anchor), HTMLDialogElement/show()" data-dfn-type="argument" data-export="" id="dom-htmldialogelement-show-anchor-anchor">anchor<a class="self-link" href="interactive-elements.html#dom-htmldialogelement-show-anchor-anchor"></a></dfn>);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="interactive-elements.html#dom-htmldialogelement-showmodal" id="ref-for-dom-htmldialogelement-showmodal-1">showModal</a>(<span class="kt">optional</span> (<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/uievents/#interface-MouseEvent">MouseEvent</a> <span class="kt">or</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#interface-element">Element</a>) <dfn class="nv idl-code" data-dfn-for="HTMLDialogElement/showModal(anchor), HTMLDialogElement/showModal()" data-dfn-type="argument" data-export="" id="dom-htmldialogelement-showmodal-anchor-anchor">anchor<a class="self-link" href="interactive-elements.html#dom-htmldialogelement-showmodal-anchor-anchor"></a></dfn>);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="interactive-elements.html#dom-htmldialogelement-close" id="ref-for-dom-htmldialogelement-close-1">close</a>(<span class="kt">optional</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLDialogElement/close(returnValue), HTMLDialogElement/close()" data-dfn-type="argument" data-export="" id="dom-htmldialogelement-close-returnvalue-returnvalue">returnValue<a class="self-link" href="interactive-elements.html#dom-htmldialogelement-close-returnvalue-returnvalue"></a></dfn>);
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-11">dialog</a></code> element represents a part of an application that a user interacts with
  to perform a task, for example a dialog box, inspector, or window.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="dialog" data-dfn-type="element-attr" data-export="" id="element-attrdef-dialog-open"><code>open</code></dfn> attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-31">boolean
  attribute</a>. When specified, it indicates that the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-12">dialog</a></code> element is active and
  that the user can interact with it.</p>
     <div class="example" id="example-b4bf59cd">
      <a class="self-link" href="interactive-elements.html#example-b4bf59cd"></a> 
      <p>The following is an example of a modal <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-13">dialog</a></code> which provides a form for a user to add
   coins to their wallet, as part of an online game.</p>
<pre class="highlight">...
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;div&gt;</span> <span class="c">&lt;!-- body content --&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;dialog&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Add to Wallet<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"num"</span><span class="nt">&gt;</span>How many gold coins do you want to add to your wallet?<span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div&gt;&lt;input</span> <span class="na">name=</span><span class="s">amt</span> <span class="na">id=</span><span class="s">"num"</span> <span class="na">type=</span><span class="s">number</span> <span class="na">min=</span><span class="s">0</span> <span class="na">step=</span><span class="s">0.01</span> <span class="na">value=</span><span class="s">100</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;p&gt;&lt;strong&gt;</span>You add coins at your own risk.<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;div&gt;&lt;label&gt;&lt;input</span> <span class="na">name=</span><span class="s">round</span> <span class="na">type=</span><span class="s">checkbox</span><span class="nt">&gt;</span> Only add perfectly round coins <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div&gt;&lt;input</span> <span class="na">type=</span><span class="s">button</span> <span class="na">onclick=</span><span class="s">"submit()"</span> <span class="na">value=</span><span class="s">"Add Coins"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/dialog&gt;</span>
<span class="nt">&lt;/body&gt;</span>
...
</pre>
      <p><img alt="Add to Wallet Dialog" src="images/dialog.png"></p>
     </div>
     <div class="impl">
      <p>A <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-14">dialog</a></code> element without an <code>open</code> attribute
  specified should not be shown to the user. This requirement may be implemented indirectly through
  the style layer. For example, user agents that <a data-link-type="dfn" href="infrastructure.html#rendering-support-the-suggested-default-rendering" id="ref-for-rendering-support-the-suggested-default-rendering-4">support the suggested
  default rendering</a> implement this requirement using the CSS rules described in <a href="rendering.html#rendering">§10 Rendering</a>.</p>
     </div>
     <p>The <code>tabindex</code> attribute must not be specified on <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-15">dialog</a></code> elements.</p>
     <dl class="domintro">
      <dt><var>dialog</var> . <code>show</code>( [ <var>anchor</var> ] )
      </dt><dd>
       <p>Displays the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-16">dialog</a></code> element.</p>
       <p>The argument, if provided, provides an anchor point to which the element will be fixed.</p>
      </dd><dt><var>dialog</var> . <code>showModal</code>( [ <var>anchor</var> ] )
      </dt><dd>
       <p>Displays the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-17">dialog</a></code> element and makes it the top-most modal dialog.</p>
       <p>The argument, if provided, provides an anchor point to which the element will be fixed.</p>
       <p>This method honors the <code><a data-link-type="element-sub" href="sec-forms.html#element-attrdef-formelements-autofocus" id="ref-for-element-attrdef-formelements-autofocus-16">autofocus</a></code> attribute.</p>
      </dd><dt><var>dialog</var> . <code>close</code>( [ <var>result</var> ] )
      </dt><dd>
       <p>Closes the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-18">dialog</a></code> element.</p>
       <p>The argument, if provided, provides a return value.</p>
      </dd><dt><var>dialog</var> . <code class="idl"><a data-link-type="idl" href="interactive-elements.html#dom-htmldialogelement-returnvalue" id="ref-for-dom-htmldialogelement-returnvalue-2">returnValue</a></code> [ = <var>result</var> ]
      </dt><dd>
       <p>Returns the <code>dialog</code>’s return value.</p>
       <p>Can be set, to update the return value.</p>
     </dd></dl>
     <div class="impl">
      <p>When the <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDialogElement" data-dfn-type="method" data-export="" data-lt="show(anchor)|show()" id="dom-htmldialogelement-show"><code>show()</code></dfn> method is invoked, the user
  agent must run the following steps:</p>
      <ol>
       <li>If the element already has an <code>open</code> attribute, then
    abort these steps.
       </li><li>Add an <code>open</code> attribute to the <code>dialog</code> element, whose value is the empty string.
       </li><li>If the <code>show()</code> method was invoked with an argument, <a data-link-type="dfn" href="interactive-elements.html#set-up-the-position" id="ref-for-set-up-the-position-1">set up the position</a> of the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-19">dialog</a></code> element, using that argument as the
    anchor. Otherwise, set the <code>dialog</code> to the <a data-link-type="dfn" href="interactive-elements.html#normal-alignment" id="ref-for-normal-alignment-1">normal alignment</a> mode.
       </li><li>Run the <a data-link-type="dfn" href="interactive-elements.html#dialog-focusing-steps" id="ref-for-dialog-focusing-steps-1">dialog focusing steps</a> for the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-20">dialog</a></code> element.
      </li></ol>
      <hr>
      <p>Each <code>Document</code> has a stack of <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-21">dialog</a></code> elements known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="pending-dialog-stack">pending dialog stack</dfn>. When a <code>Document</code> is created, this stack must be
  initialized to be empty.</p>
      <p>When an element is added to the <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-1">pending dialog stack</a>, it must also be added to the <a data-link-type="dfn" href="https://fullscreen.spec.whatwg.org/#top-layer">top layer</a>. When an element is removed from the <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-2">pending dialog
  stack</a>, it must be removed from the <a data-link-type="dfn" href="https://fullscreen.spec.whatwg.org/#top-layer">top layer</a>. <a data-link-type="biblio" href="references.html#biblio-fullscreen">[FULLSCREEN]</a></p>
      <p>When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="modal dialog is shown" data-noexport="" id="modal-dialog-is-shown"></dfn><dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDialogElement" data-dfn-type="method" data-export="" data-lt="showModal(anchor)|showModal()" id="dom-htmldialogelement-showmodal"><code>showModal()</code></dfn> method is invoked,
  the user agent must run the following steps:</p>
      <ol>
       <li>Let <var>subject</var> be the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-22">dialog</a></code> element on which the method was
    invoked.
       </li><li>If <var>subject</var> already has an <code>open</code> attribute, then throw an <code>InvalidStateError</code> exception and abort these steps.
       </li><li>If <var>subject</var> is not <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-17">in a <code>Document</code></a>, then throw
    an <code>InvalidStateError</code> exception and abort these steps.
       </li><li>Add an <code>open</code> attribute to <var>subject</var>, whose value is the empty string.
       </li><li>If the <code>showModal()</code> method was invoked with an
    argument, <a data-link-type="dfn" href="interactive-elements.html#set-up-the-position" id="ref-for-set-up-the-position-2">set up the position</a> of <var>subject</var>, using that argument
    as the anchor. Otherwise, set the <code>dialog</code> to the <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-1">centered alignment</a> mode.
       </li><li>Let <var>subject</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> be <a data-link-type="dfn" href="editing.html#blocked-by-the-modal-dialog" id="ref-for-blocked-by-the-modal-dialog-1">blocked by the modal dialog</a> <var>subject</var>.
       </li><li>Push <var>subject</var> onto <var>subject</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-3">pending dialog stack</a>.
       </li><li>Run the <a data-link-type="dfn" href="interactive-elements.html#dialog-focusing-steps" id="ref-for-dialog-focusing-steps-2">dialog focusing steps</a> for <var>subject</var>.
      </li></ol>
      <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="dialog-focusing-steps">dialog focusing steps</dfn> for a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-23">dialog</a></code> element <var>subject</var> are as follows:</p>
      <ol>
       <li>If for some reason <var>subject</var> is not a <a data-link-type="dfn" href="editing.html#control-group-owner" id="ref-for-control-group-owner-1">control group owner</a> at this point, or if it is <a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-8">inert</a>, abort these steps.
       </li><li>
        <p>Let <var>control</var> be the first non-<a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-9">inert</a> <a data-link-type="dfn" href="editing.html#focusable" id="ref-for-focusable-1">focusable area</a> in <var>subject</var>’s <a data-link-type="dfn" href="editing.html#control-group" id="ref-for-control-group-1">control group</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor" id="ref-for-dom-anchor-1">DOM anchor</a> has an <code><a data-link-type="element-sub" href="sec-forms.html#element-attrdef-formelements-autofocus" id="ref-for-element-attrdef-formelements-autofocus-17">autofocus</a></code> attribute specified.</p>
        <p>If there isn’t one, then let <var>control</var> be the first non-<a data-link-type="dfn" href="editing.html#inertness" id="ref-for-inertness-10">inert</a> <a data-link-type="dfn" href="editing.html#focusable" id="ref-for-focusable-2">focusable area</a> in <var>subject</var>’s <a data-link-type="dfn" href="editing.html#control-group" id="ref-for-control-group-2">control group</a>.</p>
        <p>If there isn’t one of those either, then let <var>control</var> be <var>subject</var>.</p>
       </li><li>Run the <a data-link-type="dfn" href="editing.html#focusing-steps" id="ref-for-focusing-steps-6">focusing steps</a> for <var>control</var>.
      </li></ol>
      <p>If at any time a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-24">dialog</a></code> element is <a data-link-type="dfn" href="infrastructure.html#document-removed-from-a-document" id="ref-for-document-removed-from-a-document-8">removed from a <code>Document</code></a>, then if that <code>dialog</code> is in that <code>Document</code>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-4">pending dialog stack</a>, the following steps must be run:</p>
      <ol>
       <li>Let <var>subject</var> be that <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-25">dialog</a></code> element and <var>document</var> be the <code>Document</code> from which it is being removed.
       </li><li>Remove <var>subject</var> from <var>document</var>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-5">pending
    dialog stack</a>.
       </li><li>If <var>document</var>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-6">pending dialog stack</a> is not empty, then let <var>document</var> be <a data-link-type="dfn" href="editing.html#blocked-by-the-modal-dialog" id="ref-for-blocked-by-the-modal-dialog-2">blocked by the modal
    dialog</a> that is at the top of <var>document</var>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-7">pending dialog
    stack</a>. Otherwise, let <var>document</var> be no longer <a data-link-type="dfn" href="editing.html#blocked-by-the-modal-dialog" id="ref-for-blocked-by-the-modal-dialog-3">blocked by a modal
    dialog</a> at all.
      </li></ol>
      <p>When the <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDialogElement" data-dfn-type="method" data-export="" data-lt="close(returnValue)|close()" id="dom-htmldialogelement-close"><code>close()</code></dfn> method is invoked, the user
  agent must <a data-link-type="dfn" href="interactive-elements.html#close-the-dialog" id="ref-for-close-the-dialog-2">close the dialog</a> that the method was invoked on. If the method was invoked
  with an argument, that argument must be used as the return value; otherwise, there is no return
  value.</p>
      <p>When a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-26">dialog</a></code> element <var>subject</var> is to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="close the dialog" data-noexport="" id="close-the-dialog">closed</dfn>, optionally with a return value <var>result</var>, the user agent
  must run the following steps:</p>
      <ol>
       <li>If <var>subject</var> does not have an <code>open</code> attribute, then abort these steps.
       </li><li>Remove <var>subject</var>’s <code>open</code> attribute.
       </li><li>If the argument <var>result</var> was provided, then set the <code class="idl"><a data-link-type="idl" href="interactive-elements.html#dom-htmldialogelement-returnvalue" id="ref-for-dom-htmldialogelement-returnvalue-3">returnValue</a></code> attribute to the value of <var>result</var>.
       </li><li>
        <p>If <var>subject</var> is in its <code>Document</code>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-8">pending dialog
    stack</a>, then run these substeps:</p>
        <ol>
         <li>Remove <var>subject</var> from that <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-9">pending dialog stack</a>.
         </li><li>If that <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-10">pending dialog stack</a> is not empty, then let <var>subject</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> be <a data-link-type="dfn" href="editing.html#blocked-by-the-modal-dialog" id="ref-for-blocked-by-the-modal-dialog-4">blocked by the modal dialog</a> that is at the top of the <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-11">pending dialog
      stack</a>. Otherwise, let <var>document</var> be no longer <a data-link-type="dfn" href="editing.html#blocked-by-the-modal-dialog" id="ref-for-blocked-by-the-modal-dialog-5">blocked by a modal
      dialog</a> at all.
        </li></ol>
       </li><li><a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-108">Queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-136">fire a simple event</a> named <code>close</code> at <var>subject</var>.
      </li></ol>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDialogElement" data-dfn-type="attribute" data-export="" id="dom-htmldialogelement-returnvalue"><code>returnValue</code></dfn> IDL attribute, on
  getting, must return the last value to which it was set. On setting, it must be set to the new
  value. When the element is created, it must be set to the empty string.</p>
      <hr>
      <p><strong>Canceling dialogs</strong>: When a <code>Document</code>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-12">pending dialog
  stack</a> is not empty, user agents may provide a user interface that, upon activation, <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-109">queues a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-137">fire a simple event</a> named <code>cancel</code> that is cancelable at the top <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-27">dialog</a></code> element on
  the <code>Document</code>’s <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-13">pending dialog stack</a>. The default action of this event
  must be to check if that element has an <code>open</code> attribute, and
  if it does, <a data-link-type="dfn" href="interactive-elements.html#close-the-dialog" id="ref-for-close-the-dialog-3">close the dialog</a> with no return value.</p>
      <p class="note" role="note"> An example of such a UI mechanism would be the user pressing the "Escape" key. </p>
      <hr>
      <p>All <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-28">dialog</a></code> elements are always in one of three modes: <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="normal-alignment">normal alignment</dfn>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="centered-alignment">centered alignment</dfn>, and <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="magically aligned|magic alignment" data-noexport="" id="magically-aligned">magic alignment</dfn>. When a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-29">dialog</a></code> element
  is created, it must be placed in the <a data-link-type="dfn" href="interactive-elements.html#normal-alignment" id="ref-for-normal-alignment-2">normal alignment</a> mode. In this mode, normal CSS
  requirements apply to the element. The <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-2">centered alignment</a> mode is only used for <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-30">dialog</a></code> elements that are in the <a data-link-type="dfn" href="https://fullscreen.spec.whatwg.org/#top-layer">top layer</a>. <a data-link-type="biblio" href="references.html#biblio-fullscreen">[FULLSCREEN]</a> <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a></p>
      <p>When an element <var>subject</var> is placed in <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-3">centered alignment</a> mode,
  and when it is in that mode and has new rendering boxes created, the user agent must set up the
  element such that its top static position, for the purposes of calculating the used value of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-top">top</a> property, is the value that would place the element’s top margin edge as far from the top of
  the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-21">viewport</a> as the element’s bottom margin edge from the bottom of the viewport, if the element’s
  height is less than the height of the viewport, and otherwise is the value that would place the
  element’s top margin edge at the top of the viewport.</p>
      <p>If there is a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-31">dialog</a></code> element with <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-4">centered alignment</a> and that is <a data-link-type="dfn" href="rendering.html#being-rendered" id="ref-for-being-rendered-11">being rendered</a> when its <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-74">browsing context</a> changes <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-22">viewport</a> width (as
  measured in CSS pixels), then the user agent must recreate the element’s boxes, recalculating its
  top static position as in the previous paragraph.</p>
      <p>This top static position of a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-32">dialog</a></code> element with <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-5">centered alignment</a> must remain the element’s top static position until its boxes are recreated. (The element’s static
  position is only used in calculating the used value of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-top">top</a> property in certain situations;
  it’s not used, for instance, to position the element if its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property is set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-positioning/#valdef-position-static">static</a>.)</p>
      <p>When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="set-up-the-position">set up the position</dfn> of an element <var>subject</var> using an anchor <var>anchor</var>, it must run the following
  steps:</p>
      <ol>
       <li>
        <p>If <var>anchor</var> is a <code>MouseEvent</code> object, then run these
    substeps:</p>
        <ol>
         <li>If <var>anchor</var>’s target element does not have a rendered box, or is in a
      different document than <var>subject</var>, then let <var>subject</var> be
      in the <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-6">centered alignment</a> mode, and abort the <a data-link-type="dfn" href="interactive-elements.html#set-up-the-position" id="ref-for-set-up-the-position-3">set up the position</a> steps.
         </li><li>Let <var>anchor element</var> be an anonymous element rendered as a box with
      zero height and width (so its margin and border boxes both just form a point), positioned so
      that its top and left are at the coordinate identified by the event, and whose properties all
      compute to their initial values.
        </li></ol>
        <p>Otherwise, let <var>anchor element</var> be <var>anchor</var>.</p>
       </li><li>Put <var>subject</var> in the <a data-link-type="dfn" href="interactive-elements.html#magically-aligned" id="ref-for-magically-aligned-1">magic alignment</a> mode, aligned to <var>anchor element</var>.
      </li></ol>
      <p>While an element <var>A</var> has <a data-link-type="dfn" href="interactive-elements.html#magically-aligned" id="ref-for-magically-aligned-2">magic alignment</a>, aligned to an element <var>B</var>, the following requirements apply:</p>
      <ul>
       <li>
        <p>If at any time either <var>A</var> or <var>B</var> cease having rendered
    boxes, <var>A</var> and <var>B</var> cease being in the same <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>, or <var>B</var> ceases being earlier than <var>A</var> in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-65">tree order</a>, then, if <var>subject</var> is in the <a data-link-type="dfn" href="interactive-elements.html#pending-dialog-stack" id="ref-for-pending-dialog-stack-14">pending dialog stack</a>, let <var>subject</var>’s mode become <a data-link-type="dfn" href="interactive-elements.html#centered-alignment" id="ref-for-centered-alignment-7">centered
    alignment</a>, otherwise, let <var>subject</var>’s mode become <a data-link-type="dfn" href="interactive-elements.html#normal-alignment" id="ref-for-normal-alignment-3">normal
    alignment</a>.</p>
       </li><li>
        <p><var>A</var>’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property must compute to the keyword '<a data-link-type="dfn" href="interactive-elements.html#absolute-anchored" id="ref-for-absolute-anchored-1">absolute-anchored</a>' rather than whatever it would
    otherwise compute to (i.e., the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property’s specified value is ignored).</p>
        <p class="note" role="note"> The '<a data-link-type="dfn" href="interactive-elements.html#absolute-anchored" id="ref-for-absolute-anchored-2">absolute-anchored</a>'
    keyword’s requirements are described below. </p>
       </li><li>
        <p>The anchor points for <var>A</var> and <var>B</var> are defined as per the
    appropriate entry in the following list:</p>
        <dl class="switch">
         <dt>If the computed value of <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-1">anchor-point</a> is <a class="css" data-link-type="maybe" href="interactive-elements.html#valdef-anchor-point-none" id="ref-for-valdef-anchor-point-none-1">none</a> on both <var>A</var> and <var>B</var> 
         </dt><dd> The anchor points of <var>A</var> and <var>B</var> are the center points
      of their respective first boxes' border boxes. 
         </dd><dt>If the computed value of <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-2">anchor-point</a> is <a class="css" data-link-type="maybe" href="interactive-elements.html#valdef-anchor-point-none" id="ref-for-valdef-anchor-point-none-2">none</a> on <var>A</var> and a specific
      point on <var>B</var> 
         </dt><dd>
           The anchor point of <var>B</var> is the point given by its <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-3">anchor-point</a> property. 
          <p>If the anchor point of <var>B</var> is the center point of <var>B</var>’s
      first box’s border box, then <var>A</var>’s anchor point is the center point of its
      first box’s margin box.</p>
          <p>Otherwise, <var>A</var>’s anchor point is on one of its margin edges. Consider
      four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var>B</var>’s first box’s border box, and that extend respectively through the top left
      corner, top right corner, bottom right corner, and bottom left corner of <var>B</var>’s first box’s border box. <var>A</var>’s anchor point is determined
      by the location of <var>B</var>’s anchor point relative to these four hypothetical
      lines, as follows:</p>
          <p>If the anchor point of <var>B</var> lies on L1 or L2, or inside the area bounded
      by L1 and L2 that also contains the points above <var>B</var>’s first box’s border
      box, then let <var>A</var>’s anchor point be the horizontal center of <var>A</var>’s bottom margin edge.</p>
          <p>Otherwise, if the anchor point of <var>B</var> lies on L3 or L4, or inside the
      area bounded by L3 and L4 that also contains the points below <var>B</var>’s first
      box’s border box, then let <var>A</var>’s anchor point be the horizontal center of <var>A</var>’s top margin edge.</p>
          <p>Otherwise, if the anchor point of <var>B</var> lies inside the area bounded by L4
      and L1 that also contains the points to the left of <var>B</var>’s first box’s border
      box, then let <var>A</var>’s anchor point be the vertical center of <var>A</var>’s right margin edge.</p>
          <p>Otherwise, the anchor point of <var>B</var> lies inside the area bounded by L2 and
      L3 that also contains the points to the right of <var>B</var>’s first box’s border
      box; let <var>A</var>’s anchor point be the vertical center of <var>A</var>’s left margin edge.</p>
         </dd><dt>If the computed value of <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-4">anchor-point</a> is a specific point on <var>A</var> and <a class="css" data-link-type="maybe" href="interactive-elements.html#valdef-anchor-point-none" id="ref-for-valdef-anchor-point-none-3">none</a> on <var>B</var> 
         </dt><dd>
           The anchor point of <var>A</var> is the point given by its <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-5">anchor-point</a> property. 
          <p>If the anchor point of <var>A</var> is the center point of <var>A</var>’s
      first box’s margin box, then <var>B</var>’s anchor point is the center point of its
      first box’s border box.</p>
          <p>Otherwise, <var>B</var>’s anchor point is on one of its border edges. Consider
      four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var>A</var>’s first box’s margin box, and that extend respectively through the top left
      corner, top right corner, bottom right corner, and bottom left corner of <var>A</var>’s first box’s margin box. <var>B</var>’s anchor point is determined
      by the location of <var>A</var>’s anchor point relative to these four hypothetical
      lines, as follows:</p>
          <p>If the anchor point of <var>A</var> lies on L1 or L2, or inside the area bounded
      by L1 and L2 that also contains the points above <var>A</var>’s first box’s margin
      box, then let <var>B</var>’s anchor point be the horizontal center of <var>B</var>’s bottom border edge.</p>
          <p>Otherwise, if the anchor point of <var>A</var> lies on L3 or L4, or inside the
      area bounded by L3 and L4 that also contains the points below <var>A</var>’s first
      box’s margin box, then let <var>B</var>’s anchor point be the horizontal center of <var>B</var>’s top border edge.</p>
          <p>Otherwise, if the anchor point of <var>A</var> lies inside the area bounded by L4
      and L1 that also contains the points to the left of <var>A</var>’s first box’s margin
      box, then let <var>B</var>’s anchor point be the vertical center of <var>B</var>’s right border edge.</p>
          <p>Otherwise, the anchor point of <var>A</var> lies inside the area bounded by L2 and
      L3 that also contains the points to the right of <var>A</var>’s first box’s margin
      box; let <var>B</var>’s anchor point be the vertical center of <var>B</var>’s left border edge.</p>
         </dd><dt>If the computed value of <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-6">anchor-point</a> is a specific point on both <var>A</var> and <var>B</var> 
         </dt><dd> The anchor points of <var>A</var> and <var>B</var> are the points given
      by their respective <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-7">anchor-point</a> properties. 
        </dd></dl>
        <p class="note" role="note"> The rules above generally use <var>A</var>’s <em>margin</em> box, but <var>B</var>’s <em>border</em> box. This is because while <var>A</var> always
    has a margin box, and using the margin box allows for the dialog to be positioned offset from
    the box it is annotating, <var>B</var> sometimes does not have a margin box (e.g., if it
    is a table-cell), or has a margin box whose position may be not entirely clear (e.g., in the face
    of margin collapsing and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-clear">clear</a> handling of in-flow blocks). </p>
        <p>In cases where <var>B</var> does not have a border box but its border box is used by
    the algorithm above, user agents must use its first box’s content area instead. (This is in
    particular an issue with boxes in tables that have <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse">border-collapse</a> set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ruby-1/#valdef-ruby-merge-collapse">collapse</a>.)</p>
       </li><li>
        <p>When an element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property computes to '<dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="absolute-anchored">absolute-anchored</dfn>', the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-float">float</a> property does not
    apply and must compute to <a class="css" data-link-type="maybe" href="interactive-elements.html#valdef-anchor-point-none" id="ref-for-valdef-anchor-point-none-4">none</a>, the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a> property must compute to a value as described by
    the table in the section of CSS
    2.1 describing the <cite>relationships between <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-float">float</a></cite>,
    and the element’s box must be positioned using the rules for absolute positioning but with its
    static position set such that if the box is positioned in its static position, its anchor point
    is exactly aligned over the anchor point of the element to which it is <a data-link-type="dfn" href="interactive-elements.html#magically-aligned" id="ref-for-magically-aligned-3">magically aligned</a>. Elements aligned in this way are <i>absolutely
    positioned</i>. For the purposes of determining the containing block of other elements, the
    '<a data-link-type="dfn" href="interactive-elements.html#absolute-anchored" id="ref-for-absolute-anchored-3">absolute-anchored</a>' keyword must be treated
    like the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-positioning/#valdef-position-absolute">absolute</a> keyword.</p>
      </li></ul>
      <p class="note" role="note"> The trivial example of an element that does not have a rendered box is one whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a> property computes to <a class="css" data-link-type="maybe" href="interactive-elements.html#valdef-anchor-point-none" id="ref-for-valdef-anchor-point-none-5">none</a>. However, there are many other cases; e.g., table columns do
  not have boxes (their properties merely affect other boxes). </p>
      <p class="note" role="note"> If an element to which another element is anchored changes rendering, the anchored
  element will be repositioned accordingly. (In other words, the requirements above are live,
  they are not just calculated once per anchored element.) </p>
      <p class="note" role="note"> The '<a data-link-type="dfn" href="interactive-elements.html#absolute-anchored" id="ref-for-absolute-anchored-4">absolute-anchored</a>'
  keyword is not a keyword that can be specified in CSS; the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property can only compute to
  this value if the <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-33">dialog</a></code> element is positioned via the APIs described above. </p>
      <p>User agents in visual interactive media should allow the user to pan the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-23">viewport</a> to access all
  parts of a <code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-34">dialog</a></code> element’s border box, even if the element is larger than the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-24">viewport</a> and the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-25">viewport</a> would otherwise not have a scroll mechanism (e.g., because the viewport’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">overflow</a> property is set to <span class="css">hidden</span>).</p>
      <hr>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDialogElement" data-dfn-type="attribute" data-export="" id="dom-htmldialogelement-open"><code>open</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-111">reflect</a> the <code>open</code> content attribute.</p>
     </div>
     <h5 class="heading settled" data-level="4.11.7.1" id="anchor-points"><span class="secno">4.11.7.1. </span><span class="content">Anchor points</span><a class="self-link" href="interactive-elements.html#anchor-points"></a></h5>
     <p class="critical">This section will eventually be moved to a CSS specification; it is specified
  here only on an interim basis until an editor can be found to own this.</p>
     <table class="def propdef" data-link-for-hint="anchor-point">
      <tbody>
       <tr>
        <th>Name:
        </th><td><dfn class="dfn-paneled css" data-dfn-type="property" data-export="" id="propdef-anchor-point">anchor-point</dfn>
       </td></tr><tr class="value">
        <th>Value:
        </th><td class="prod">[ none <a data-link-type="grammar" href="https://www.w3.org/TR/css3-values/#comb-one">|</a> &lt;position&gt; ]
       </td></tr><tr>
        <th>Initial:
        </th><td>none
       </td></tr><tr>
        <th>Applies to:
        </th><td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a>
       </td></tr><tr>
        <th>Inherited:
        </th><td>no
       </td></tr><tr>
        <th>Percentages:
        </th><td>refer to width or height of box; see prose
       </td></tr><tr>
        <th>Media:
        </th><td>visual
       </td></tr><tr>
        <th>Computed value:
        </th><td>The specified value, but with any lengths replaced by their corresponding absolute length
       </td></tr><tr>
        <th>Animatable:
        </th><td>no
       </td></tr><tr>
        <th>Canonical order:
        </th><td>per grammar
     </td></tr></tbody></table>
     <p>The <a class="property" data-link-type="propdesc" href="interactive-elements.html#propdef-anchor-point" id="ref-for-propdef-anchor-point-8">anchor-point</a> property specifies a point to which dialog boxes are to be aligned.</p>
     <p>If the value is a <dfn class="css" data-dfn-for="anchor-point" data-dfn-type="value" data-export="" id="valdef-anchor-point-position">&lt;position&gt;<a class="self-link" href="interactive-elements.html#valdef-anchor-point-position"></a></dfn>, the anchor point is the point given by the value, which
  must be interpreted relative to the element’s first rendered box’s margin box. Percentages must be
  calculated relative to the element’s first rendered box’s margin box (specifically, its width for
  the horizontal position and its height for the vertical position). <a data-link-type="biblio" href="references.html#biblio-css-values">[CSS-VALUES]</a> <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a></p>
     <p>If the value is the keyword <dfn class="dfn-paneled css" data-dfn-for="anchor-point" data-dfn-type="value" data-export="" id="valdef-anchor-point-none">none</dfn>, then no explicit anchor point is defined. The user agent
  will pick an anchor point automatically if necessary (as described in the definition of the <code>open()</code> method above).</p>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="sec-forms.html#sec-forms"><span class="secno">4.10</span> <span class="content"><span>Forms</span></span></a> — <a href="index.html#contents">Table of contents</a> — <a href="semantics-scripting.html#semantics-scripting"><span class="secno">4.12</span> <span class="content">Scripting</span></a> →</p></body></html>
